
// scss 转换为css 命令：sass --watch input.scss:output.css  
// input.scss为输入文件，output.css为输出文件

// 定义容器和图片尺寸变量
$size: 500px;     // 环形容器大小
$imgSize: 120px;  // 每个图片项的大小

// 环形容器样式
.container {
    width: $size;
    height: $size;
    border: 1px solid black;
    border-radius: 100%;  // 圆形边框
    margin: auto;
    margin-top: 9%;
    position: relative;
    // 容器旋转动画，实现整体旋转效果
    animation: rotate 20s linear infinite;
}

// 图片项样式
.item {
    width: $imgSize;
    height: $imgSize;
    border-radius: 100%;
    position: absolute;
    // 将图片定位在容器顶部中央
    left: calc($size / 2 - $imgSize / 2);
    top: - $imgSize / 2;
    
    // 图片样式
    img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }
    
    // 设置变换原点为容器中心，使图片围绕圆心旋转
    transform-origin: center calc($imgSize / 2 + $size / 2);
    
    // 循环为每个图片项设置不同的旋转角度
    @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
            // 计算每个图片项在环形上的位置角度
            $angle: ( $i - 1 ) * (360deg / 5);
            transform: rotate($angle);
            
            img{
                // 设置初始角度变量，用于动画
                --inint: #{$angle};
                // 反向旋转图片，保持图片始终正面朝外
                transform: rotate( -$angle );
                // 图片旋转动画，与容器旋转同步
                animation: rotate 20s linear infinite ;
            }
        }
    }
}

// 旋转动画关键帧
@keyframes rotate {
    from {
        // 使用CSS变量计算初始旋转角度
        transform: rotate(calc(var(--inint,360deg)));
    }
}

